<style scoped>

.extendGroup {
  float: right;
  margin-right: 20px;
  opacity: 0;
}

.el-tree-node__content:hover .extendGroup {
  opacity: 1;
}

</style>

<template>
  <div>
      <template v-if="routerPath=='authority'" >
          <div v-loading="loading">
            <!-- 操作 -->
            <!--工具条-->
            <el-col :span="24" class="toolbar table_toolbar" style="padding-bottom: 0px;">
              <el-form :inline="true" :model="filters">
                <el-form-item class="table_input">
                  <el-input v-model="filters.name" placeholder="输入权限名称/权限描述检索"></el-input>
                </el-form-item>
                <el-form-item class="table_i">
                  <el-button type="primary" v-on:click="fetchData"><i class="el-icon-search"></i></el-button>
                </el-form-item>
              
              </el-form>
            </el-col>
            <div class="operation">
        <!--       <el-button size="small" type="primary" v-has="[role.request]" @click="fetchData">查询</el-button>
              <el-button size="small" type="danger" v-has="[role.remove]">删除</el-button>
              <el-button size="small" v-if="$_has([role.request]) && canReset">重置</el-button>
              <el-button size="small" type="info" @click="requestNotAllowed">尝试发起越权请求</el-button> -->

            </div>
            <!-- table start  -->
            <el-table :data="list" border style="width: 100%">
              <el-table-column prop="resourceName" label="权限名称" width="220">
              </el-table-column>
              <el-table-column prop="resourceDesc" label="权限描述">
              </el-table-column>
             
              <el-table-column label="操作" width="220" align="center">
                <template slot-scope="scope">
                <!--   <el-button size="mini" type="info">编辑</el-button>
                  <el-button size="mini" type="danger">删除</el-button> -->
                  <span class="span_btn" v-if="isReleRole"  @click="releRole(scope.$index, scope.row)">关联角色</span>
                

                </template>
              </el-table-column>
            </el-table>
            <!-- table end  -->
         
          </div>
      </template>
       <template v-else>
        <router-view></router-view>
      </template>
  </div>
  
</template>

<script>
import * as authority from '../api/authority';

let myMixin = {
  data: function() {
    return { authority }
  }
}

export default {
  mixins: [myMixin],
  data() {
    return {
      isReleRole:true,
      routerPath:'',
      filters:{name:''},//搜索表单
   
      addLoading:false,//
      list: [],
      canReset: true,
      loading: false
    }
  },
  methods: {
    releRole(index,row){
      //关联角色
      this.routerPath='releroles';
       this.$router.push({path:'/authlist/authority/releroles',query: {resourceId: row.resourceId}})

    },
    getUsers(){
      //获取用户列表数据
    },
 
    fetchData(init) {      
      this.loading = true;
       if(!this.$_has([authority.request])){
        this.$message("暂无权限");
        this.loading = false;

        return;
      }
      let para = {
        /*  showCount:this.showCount,
          currentPage:this.page,//当前查询页*/
          keyword:this.filters.name
        };
      authority.request.r(para).then((res) => {
        this.total=res.data.data.totalRow;
        this.list = res.data.data;
        this.loading = false;
      })
    },
    requestNotAllowed: function(){
      role.notAllowed.r();
    }
  },
  watch: {
    // 如果路由有变化，会再次执行该方法
    "$route": function(){
      this.routerPath=this.$route.path.split("/").pop();
    }
  },
  created() {
    this.isReleRole=this.$_has([authority.releroleAuth])
    this.fetchData(true)
    this.routerPath=this.$route.path.split("/").pop();

  }
}
</script>